// 添加和编辑 行业公司弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin,Checkbox,Cascader } from 'antd'
import { connect } from 'react-redux'
/* 引用接口文档路径 */
import {addCompany,editCompany,checkCompanyName} from 'actions/companyManage'
import {getbasetypefetch,getCommonRegion} from 'actions/common'
const FormItem = Form.Item
import Ueditor from '../../components/Ueditor'
import Uploadimg from '../../components/uploadimg'
import City from '../../components/city.js'
@Form.create({
    mapPropsToFields(props) {
      return {
        companyType: Form.createFormField({//企业类型
          ...props.content,
          value: props.content.companyDomain,
        }),
        companyName: Form.createFormField({//企业名称
          ...props.content,
          value: props.content.companyName,
        }),
        companyMobile: Form.createFormField({//企业电话
          ...props.content,
          value: props.content.companyMobile,
        }),
        companyMail: Form.createFormField({//企业邮箱
          ...props.content,
          value: props.content.companyMail,
        }),
        region: Form.createFormField({//所在区域
          ...props.content,
          value: [
                  props.content.companyRegionId?String(props.content.companyRegionId):'',
                  props.content.city?props.content.city:'',
                  props.content.area?props.content.area:''
                ],
        }),
        majorBusiness: Form.createFormField({//主营产品
          ...props.content,
          value: props.content.majorBusinessId,
        }),
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)


export default class addCompanyListModal extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addImgUrl:'',//图片地址
        addImgCover:"",
        provinceid:"",//省市ID
        introduce:"",//企业描述
        imageflag:false,//封面裁剪框
        imageflagLogo:false,//logo裁剪框
        CheckboxList:[],//主营产品列表
        companyTypeList:[],//企业类型列表
        provinceList:[],//省市区三级联动
      }
    }

    addReportSubmit(callback,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                var nameList = [];
                for(var k = 0;k<values.majorBusiness.length;k++){
                  for(var i = 0; i<this.state.CheckboxList.length; i++){
                    if(values.majorBusiness[k] == this.state.CheckboxList[i].code ){
                      nameList.push(this.state.CheckboxList[i].value)
                    }
                  }
                }
                if(UE.getEditor('content').getContent() == '' || UE.getEditor('content').getContent().length == 0){
                  message.error('请输入企业描述');
                  return;
                }
                if(this.props.type == 1){
                  //判断公司名称是否存在
                  this.props.dispatch(checkCompanyName(
                    {"companyName":values.companyName},
                    (respose) => {
                      if(respose.respData == "" || respose.respData.length == 0){
                          console.log("无重复")
                          var datajson = {
                              "type":0,
                              "companyDomain":values.companyType,//企业类型
                              "companyName":values.companyName,//公司名称
                              "companyMobile":values.companyMobile,//公司电话
                              "companyRegion":values.region[0]?values.region[0]:'',//所在区域-省
                              "city":values.region[1]?values.region[1]:'',//所在区域-市
                              "area":values.region[2]?values.region[2]:'',//所在区域-区
                              "companyMail":values.companyMail,//企业邮箱
                              "companyIntroduce":UE.getEditor('content').getContentTxt(),//公司描述
                              "majorBusiness":values.majorBusiness,//主营产品
                              "majorBusinessName":nameList,//主营产品
                              "imageLogo":this.state.addImgUrl,//公司logo
                              "imageAuth":this.state.addImgCover,//公司营业执照
                          }
                          //新增              
                          this.props.dispatch(addCompany(
                          datajson,
                          (respose) => {
                              callback&&callback()
                              message.success(respose.respMsg);
                              this.props.ModalCancel();
                          }))
                      }else{
                        message.error('公司名称已存在!');
                        return;
                      }
                  }))
                }else{
                    if(values.companyName != this.props.content.companyName){                   
                      this.props.dispatch(checkCompanyName(
                        {"companyName":values.companyName},
                        (respose) => {
                          if(respose.respData == "" || respose.respData.length == 0){
                              console.log("无重复")
                              var datajson = {
                                "type":1,
                                "id":this.props.content.id,
                                "companyDomain":values.companyType,//企业类型
                                "companyName":values.companyName,//公司名称
                                "companyMobile":values.companyMobile,//公司电话
                                "companyRegion":values.region[0]?values.region[0]:'',//所在区域-省
                                "city":values.region[1]?values.region[1]:'',//所在区域-市
                                "area":values.region[2]?values.region[2]:'',//所在区域-区
                                "companyMail":values.companyMail,//企业邮箱
                                "companyIntroduce":UE.getEditor('content').getContentTxt(),//公司描述
                                "majorBusiness":values.majorBusiness,//主营产品
                                "majorBusinessName":nameList,//主营产品
                                "imageLogo":this.state.addImgUrl?this.state.addImgUrl:'',//公司logo
                                "imageAuth":this.state.addImgCover?this.state.addImgCover:'',//公司营业执照
                              }
                              //编辑`
                              this.props.dispatch(editCompany(
                              datajson,
                              (respose) => {
                                  callback&&callback()
                                  message.success(respose.respMsg);
                                  this.props.ModalCancel();
                              })) 
                          }else{
                            message.error('公司名称已存在!');
                            return;
                          }
                      }))
                    }
                    else{
                      var datajson = {
                        "type":1,
                        "id":this.props.content.id,
                        "companyDomain":values.companyType,//企业类型
                        "companyName":values.companyName,//公司名称
                        "companyMobile":values.companyMobile,//公司电话
                        "companyRegion":values.region[0]?values.region[0]:'',//所在区域-省
                        "city":values.region[1]?values.region[1]:'',//所在区域-市
                        "area":values.region[2]?values.region[2]:'',//所在区域-区
                        "companyMail":values.companyMail,//企业邮箱
                        "companyIntroduce":UE.getEditor('content').getContentTxt(),//公司描述
                        "majorBusiness":values.majorBusiness,//主营产品
                        "majorBusinessName":nameList,//主营产品
                        "imageLogo":this.state.addImgUrl?this.state.addImgUrl:'',//公司logo
                        "imageAuth":this.state.addImgCover?this.state.addImgCover:'',//公司营业执照
                      }
                      //编辑`
                      this.props.dispatch(editCompany(
                      datajson,
                      (respose) => {
                          callback&&callback()
                          message.success(respose.respMsg);
                          this.props.ModalCancel();
                      })) 
                    }
                    
                }                                
            }
        });       
    }

    imageuploaded() {
      this.setState({
        imageflag:true
      });
    }
    closeFn(){
      this.setState({
        imageflag:false
      });
    }
    urlFn(url){
      this.setState({
        imageflag:false,
        addImgCover:url
      });
    }

    imageuploadedLogo() {
      this.setState({
        imageflagLogo:true
      });
    }
    closeFnLogo(){
      this.setState({
        imageflagLogo:false
      });
    }
    urlFnLogo(url){
      this.setState({
        imageflagLogo:false,
        addImgUrl:url
      });
    }
    componentWillMount(){
      this.setState({
        introduce:this.props.content.companyIntroduce,
        addImgUrl: this.props.content.companyLogo,
        addImgCover: this.props.content.companyBusinessLicence,
      })
    }
    componentDidMount() {
      this.props.dispatch(getCommonRegion(//查询基础数据-省市区三级联动
        {"":""},
        (respose) => {
        this.setState({
          provinceList:respose.respData
        })
      }))
      this.props.dispatch(getbasetypefetch(//查询基础数据-企业类型
        {"type":13},
        (respose) => {
        this.setState({
            companyTypeList:respose.respData.resultData
        })
      }))
      this.props.dispatch(getbasetypefetch(//查询基础数据-主营产品
          {"type":14},
          (respose) => {
          this.setState({
              CheckboxList:respose.respData.resultData
          })
      }))
    }

    // 城市选择框选中的值
    getStateprovince(provinceid){
      console.log(provinceid);
      this.setState({
        provinceid:provinceid
      })
    }
    render () {
        const { getFieldDecorator } = this.props.form;
        const CheckboxGroup = Checkbox.Group;
        const content = this.props.content;
        const formItemLayout = {
          labelCol: {
              sm: { span: 3 },
          },
          wrapperCol: {
              sm: { span: 20 },
          },
        };
        return (
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增公司" : "编辑公司" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                destroyOnClose={true}
            >
            <div>
              <Form>
              <FormItem label="企业类型" {...formItemLayout} style={{display:'flex',alignItems:'center'}}>
                    {
                      getFieldDecorator('companyType', {
                          rules: [{
                              required: true,message:"请选择企业类型"
                          }],
                      })(
                      <CheckboxGroup>
                          {
                            this.state.companyTypeList.map((item,i)=> {
                              return(
                                <Checkbox style={{marginLeft:"8px"}} value={item.code} key={i} >{item.value}</Checkbox>
                              )
                            })
                          }
                      </CheckboxGroup>
                      )
                    }      
                </FormItem>
                {/* <FormItem label="企业类型" {...formItemLayout}>
                  {
                    getFieldDecorator('companyType', {
                        rules: [{
                            required: true,message:"请选择企业类型"
                        }],
                    })(
                        <Select placeholder="请选择企业类型" style={{ width:180 }}>
                            {
                            this.state.companyTypeList.map((item,i)=> {
                                return(
                                    <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                                )
                            })
                            }
                        </Select>
                    )
                  }      
                </FormItem> */}
                <FormItem label="企业名称" {...formItemLayout}>
                  {
                    getFieldDecorator('companyName', {
                    rules: [{
                        required: true,message:"请输入公司名称"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />
                    )
                  }                 
                </FormItem>
                <FormItem label="联系电话" {...formItemLayout}>
                  {
                    getFieldDecorator('companyMobile', {
                    rules: [
                      {
                        validator(rules, value, callback){                          
                          if (!value) {
                            callback(new Error('请输入联系电话'));
                          }else if(/\D/g.test(value)){
                            callback(new Error('请输入正确的联系电话'));
                          }else{
                            callback();
                          }
                        }
                      }
                      ],
                    })(
                      <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }
                </FormItem>
                <FormItem label="所在区域" {...formItemLayout}>
                  {
                    getFieldDecorator('region', {
                    rules: [{
                      required: true,message:"请选择所属地域"
                      }],
                    })(
                      <Cascader style={{width:"200px"}} options={this.state.provinceList}  placeholder="请选择类型" />
                    )
                  }  
                </FormItem>
                <FormItem label="企业邮箱" {...formItemLayout}>
                  {
                    getFieldDecorator('companyMail', {
                    rules: [
                      {
                        validator(rules, value, callback){                          
                          if (!value) {
                            callback();
                          }else{
                            callback();
                          }
                        }
                      }
                      ],
                    })(
                      <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }
                </FormItem>
                <FormItem label="企业描述" {...formItemLayout}>
                  <Ueditor  id="content" value={this.state.introduce} toolbars={1} height="200" />
                </FormItem>
                <FormItem label="主营产品" {...formItemLayout} style={{display:'flex',alignItems:'center'}}>
                    {
                      getFieldDecorator('majorBusiness', {
                          rules: [{
                              required: true,message:"请选择主营产品"
                          }],
                      })(
                      <CheckboxGroup>
                          {
                            this.state.CheckboxList.map((item,i)=> {
                              return(
                                <Checkbox style={{marginLeft:"8px"}} value={item.code} key={i} >{item.value}</Checkbox>
                              )
                            })
                          }
                      </CheckboxGroup>
                      )
                    }      
                </FormItem>
                <FormItem label="公司Logo" {...formItemLayout}>
                    <img onClick={this.imageuploadedLogo.bind(this)} style={{width:"100px",verticalAlign:"bottom",marginRight:"10px"}} 
                        src={ this.state.addImgUrl ? this.state.addImgUrl :require('../../images/baseImg.png') }
                    />
                    {
                      this.state.imageflagLogo?
                      <Uploadimg width={300} height={300} visible={this.state.imageflagLogo} closeModal={this.closeFnLogo.bind(this)} urlFn={this.urlFnLogo.bind(this)}/> 
                      :''
                    }
                </FormItem>
                <FormItem label="营业执照副本" {...formItemLayout}>
                    <img onClick={this.imageuploaded.bind(this)} style={{width:"100px",verticalAlign:"bottom",marginRight:"10px"}} 
                        src={ this.state.addImgCover ? this.state.addImgCover :require('../../images/baseImg.png') }
                    />
                    {
                      this.state.imageflag?
                      <Uploadimg width={600} height={400} visible={this.state.imageflag} closeModal={this.closeFn.bind(this)} urlFn={this.urlFn.bind(this)}/>
                      :''
                    }
                </FormItem>                
              </Form>
            </div>
          </Modal>
        )
    }
}